<!-- 检测者列表 -->
<div class="layuimini-container">
	
	<div class="layuimini-main" style="padding:0 4px;">
		<!-- 表格：数据表格 -->
		<table class="layui-hide" id="roleManagement" lay-filter="roleManagementFilter"></table>
	</div>
					
	<!-- 定义 id="toolbarDemo"  -->
	<script type="text/html" id="roleToolbar">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-normal" lay-event="add"><i class="fa fa-pencil"></i> 新增角色 </button>
		</div>
	</script>

	<!-- 定义 id="currentTableBar" -->
	<script type="text/html" id="roleTableBar">
		<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-sm" lay-event="authorization"><i class="fa fa-key"></i> 授权 </button>
			<button type="button" class="layui-btn layui-btn-sm" lay-event="edit"> 编辑 </button>
		</div>
	</script>

</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			element = layui.element,
			miniPage = layui.miniPage,
			layer = layui.layer;

		//初始化字典数据
		
		
		//渲染form表示，否则select显示有问题
		//注意：使用<form>表单标签的要进行渲染
		form.render();


		//对table进行初始化
		table.render({
			elem: '#roleManagement', //指定初始化的tableID
			url: 'http://localhost:8006/sccRole', //请求地址,获取数据，后期将调用controller的接口，获得json数据
			toolbar: '#roleToolbar', //引用上面定义的工具栏按钮
			defaultToolbar: [],
			cols: [
				[ //字段，表头
					{field: 'roleId', title: 'ID', width: '5%', align:'center'},
					{field: 'roleName',title: '角色名称', align:'center'},
					{field: 'roleDesc',title: '描述'},
					{field: 'status',title: '状态', sort: true, align:'center',
						templet : function(d){
							return d.status == 1 ? '正常':'禁用';
						}
					},
					{field: 'remark',title: '备注'}, 
					{title: '操作',minWidth: 120,
						toolbar: '#roleTableBar',
						align: "center"
					}
				]
			]
		});


		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(roleManagementFilter)', function(obj) {
			if (obj.event === 'add') { // 监听添加操作
				var content = miniPage.getHrefContent('page/table/add-role.html'); //加载页面
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '新增角色信息',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: [openWH[0]-50 + 'px', openWH[1]-50 + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content
				});
			}
			return false;
		});
		//监听授权和修改
		table.on('tool(roleManagementFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;
			console.log(data);
			localStorage.setItem('roleId',data.roleId);
			if (obj.event === 'authorization') { //授权事件
				var content = miniPage.getHrefContent('page/table/set-authorization.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '设置角色权限',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['70%', '70%'],
					offset: ['15%','15%'],
					content: content, 
					success: function(layero, index){
						$(layero).find("input[name='roleName']").val(data.roleName);
						form.render(); //更新全部
					}
				});
				return false;
			}else if(obj.event==='edit'){
				var content = miniPage.getHrefContent('page/table/role_edit.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '修改角色信息',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['70%', '70%'],
					offset: ['15%','15%'],
					content: content, 
					success: function(layero, index){
						$(layero).find("input[name='roleId']").val(data.roleId);
						$(layero).find("input[name='roleName']").val(data.roleName);
						$(layero).find("input[name='roleDesc']").val(data.roleDesc);
						$(layero).find("input[name='remark']").val(data.remark);
						var check=$("input[name='status']");
						for (var i = 0; i < check.length; i++) {
							data.status==1 ? check[i].checked=true:check[i].checked=false;
						}
						form.render(); //更新全部
					}
				});
				return false;
			}
		});
	});
</script>